body, p, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
}
#app {
  width: 100%;
  // background-color: rgba(255, 229, 236, 1);
  background-image: './images/background.png';
  color: white;
  overflow: hidden;
  .head-img {
    width:100%;
  }

  .activity-desc{
    width:81.6%;
    height:3.626667rem;
    display: block;
    margin:  0 auto .64rem;
    background-color: white;
    .desc-text{
      width: 92.16%;
      height: 2.026667rem;
      display: inline-block;
      padding-top: .8rem,;
      padding-left: .32rem;
      // margin: .8rem,.32rem;
    }
    
    }

    .activity-box{
      width:81.6%;
      height:7.52rem;
      box-sizing: border-box;
      margin:  0 auto .64rem;
      background-color: burlywood;
      .title{
        width:61.33%;
        height: .8rem;
        margin-left: 1.493333rem;
        margin-top: -0.4rem;
        border-radius:.426667rem;
      }
      .activity-first{
        width:75.2%;
        height:1.44rem;
        background-color: black;
        margin:  0 auto .64rem;
      }
    }
    .head-img1{
      position: absolute;
      top: 54rem;
      width: 90%;
      height: .8rem;
      left: 50%;
      margin-left: -45%;
      z-index: 100;
    }
    .head-img2{
      position: absolute;
      top: 54rem;
      width: 82%;
      height: .8rem;
      left: 50%;
      margin-left: -41%;
      z-index: 100;
    }
    .list{
      position: absolute;
      width: 81.6%;
      // width: 100%;
      height: 14.56rem;
      margin:  0 auto .64rem;
      background-color: white;
      top: 54rem;
      left: 50%;
      margin-left: -40.8%;
      .list-first{
        position: relative;
        width: 96.08%;
        height: 1.12rem;
        top:.8rem;
        margin: 0 auto;
        border-radius:42px;
        border:2px solid rgba(139,97,255,1);
        display: flex;
        justify-content:space-around; 
        padding: .106667rem;
        .list-btn{
          width: 33.33%;
          height: .96rem;
          margin:  auto;      
          text-align: center;   
          border-radius:.56rem;
          p{
            position: relative;
            display: inline-block;
            vertical-align: middle;
            color:rgba(139,97,255,1);
            top: 50%;
            margin-top: -0.426667rem;
          }
        }
        .list-btn-c{
          // background:linear-gradient(90deg,rgba(187,149,255,1) 0%,rgba(143,101,255,1) 100%) !important;
          background-color: rgba(139,97,255,1);
          p{
            color: white !important;
          }
          
        }
      }
      .list-two{
        position: relative;
        width: 100%;
        height: .373333rem;
        // margin: 40px auto;
        margin-top: 1.066667rem;
        display: flex; 
        overflow: auto;    
        position: relative;
        text-align: center; 
        .two-p1{
          width:10%;
          height: .373333rem;
          margin-left: .32rem;
          text-align: center;
          display: inline-block;
          position: absolute;
        }
        .two-p2{
          width:20%;
          height: .373333rem;
          margin-left: 1.226667rem;
          display: inline-block;
          position: absolute;
        }
        .two-p3{
          width:35%;
          height: .373333rem;
          padding-left: 35%;
          text-align: center;
          display: inline-block;
          position: absolute;
        }
        .two-p4{
          width:35%;
          margin-left: 65%;
          display: inline-block;
          position: absolute;
        }
        .line-two p{
          height: .373333rem;
          color:rgba(144,102,255,1);
        }
      }
      .ranking-box {
        position: relative;
        width: 100%;
        padding-left: 0.58667rem;
        padding-right: auto;
        margin-top: 1.066667rem;
        box-sizing: border-box;
        table {
          width: 100%;
          
          tbody {
            position: relative;
            display: block;
            height: 11.667rem;
            top: -1.066667rem;
            overflow: auto;
            tr {
              // position: relative;
              display: flex;
              table-layout: fixed;
              margin-top: .533333rem;
              height: 1.28rem;
              color: black;
              // background-color: yellowgreen;
            }
            .ranking3{
              p{
                position: relative;
                top: 50%;
                margin-top: -7px;
              }
            }
            .ranking-img {
              border-radius: 50%;
              width: 80%;
              height: 0;
              padding-bottom: 80%;
              overflow: hidden;
             p{
              display: inline-block;
              vertical-align:middle;
             }
            }
            .ranking-img3 {
              overflow: hidden;
             box-sizing: border-box;
             .img1{
              width: 1.28rem;
              height: 1.28rem;
              border-radius: 50%;
              position: relative;
              top: 50%;
              margin-top: -0.64rem;
              z-index: 2;
              display: inline-block;
             }
             .img2{
              width: 1.28rem;
              border-radius: 50%;
              position: absolute;
              margin-left: -24px;
              z-index: 1;
              height: 1.28rem;
             }
            }
      
            .border-1 {
              border: .08rem solid #FFD600;
            }
      
            .border-2 {
              border: .08rem solid #F9F9F9;
            }
      
            .border-3 {
              border: .08rem solid #EB904B;
            }
      
            .ranking-1 {
              color: rgba(245, 166, 35, 1);
            }
      
            .ranking-2 {
              color: rgba(245, 166, 35, 1);
            }
      
            .ranking-3 {
              color: rgba(245, 166, 35, 1);
            }
            .nickname{
              padding: .133333rem;
              // width:15.69%;
              text-align: center;
              position: relative;
              top: 50%;
              margin-top: -20px;
              overflow: hidden;
              p{
                overflow: hidden;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:black;
              }
            }
            .nickname3{
              position: relative;
              display: inline-block;
              // width: 1.706667rem;
              width: 15.69%;
              text-align: center;
              height: 1.28rem;
              // margin-left: 1.266667rem;
              // padding-left: .533333rem;
              padding-left: .733333rem;
            }
            .nickname3-1{
              position: relative;
              width: 1.706667rem;
              display: inline-block;
              overflow: hidden;
              .p1{
                margin-top:.24rem;
                white-space: nowrap;
              }
              .p2{
                margin-top:.133333rem;
                white-space: nowrap;
              }
            }
            .nickname3-2{
              position: relative;
              width: .346667rem;
              top:-1.04rem;
              // margin-left: 2.4rem;
              margin-left: 2.6rem;
              // background-color: rgba(255, 229, 236, 1);
              p{
                overflow: hidden;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(245, 137, 177, 1);
              }
            }            
            .score{
              text-align: center;
              p{
                position: relative;
                top: 50%;
                margin-top: -0.093333rem;
              }
            }
            .score1{
              color:rgba(245, 137, 177, 1);
              position: relative;
              display: inline-block;
              text-align: center;
              top: 50%;
              margin-top: -0.093333rem;
              margin-left: .533333rem;
            }
          }
        }
      }
      
    }
    .foot{
      position: relative;
      width: 81.6%;
      height: 4.106667rem;
      margin-top: -5.013333rem;
      left: 50%;
      margin-left: -40.8%;
      // margin-bottom: .533333rem;
      padding-bottom: .266667rem;
    }
    .overlay {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      background-color: rgba(0, 0, 0, 0.7);
      // display: none;
      z-index: 100;
    }
    #over-dialog {
      position: fixed;
      top: 17.08%;
      left: 50%;
      margin-left: -4.133333rem;
    
      width: 8.266667rem;
      height: 6.586667rem;
      background-color: rgba(255, 255, 255, 1);
      border-radius: .266667rem;
      z-index: 101;
    
      >.close {
        position: absolute;
        top: 2.4%;
        right: 2.4%;
    
        width: .426667rem;
        height: .426667rem;
    
        background-image: url(../images/close2x.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
      >p {
        text-align: center;
        font-weight: 500;
        color: black;
      }
      >p:nth-child(2) {
        margin-top: 1.733333rem;
      }
      .btn {
        width: 6.64rem;
        height: 1.333333rem;
        background:rgba(50,50,50,1);
        box-shadow: 0 0 .106667rem 0 rgba(0,0,0,0.36);
        border-radius: .666667rem;
        margin: 1.226667rem auto 1.173333rem;
      
        color:rgba(52,249,165,1);
        font-weight: 600;
        text-shadow: 0 0 .106667rem rgba(0, 0, 0, 0.36);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
}

[data-dpr="1"] {
  #app {
    font-size: 12px;
    line-height: 14px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:16px;
    line-height:32px;
  }
  .nickname p{
    font-size:12px;
    overflow: hidden;
    line-height:12px;
  }

}

[data-dpr="2"] {
  #app {
    font-size: 24px;
    line-height: 28px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:32px;
    line-height:64px;
  }
  .nickname p{
    font-size:24px;
    color:black;
    line-height:24px;
  }
}

[data-dpr="3"] {
  #app {
    font-size: 36px;
    line-height: 42px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:48px;
    line-height:96px;
  }
  .nickname p{
    font-size:36px;
    color:black;
    line-height:36px;
  }
}